<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi ">
<title>帮他证实</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/comment.css">
<style type="text/css">
	.pl-dt-text{float: left;width: calc(100% - 70px);}
	.pl-dt-text>h4{font-size: 16px;color:#333;line-height: 24px;padding-top: 10px;}
	.pl-dt-text>p{font-size: 14px;color: #666;padding: 10px 0px;}
	.pl-dt-img{float: left;width: calc(100% - 70px);margin-left: 70px;position: relative;padding-bottom: 20px;margin-bottom: 10px;}
	.pl-dt-img>img{width: 80px;height: 80px;float: left;padding:5px 5px;}
	.pl-dt-img>p{position:absolute;bottom: 0px;left:0px;font-size: 14px;color: #686868;}
	.pl-dt-zan{position: absolute;bottom: 0px;right:50px;font-size: 14px;color: #666;padding-left: 24px;background-image: url('images/dz1.png');background-repeat: no-repeat;background-size: 20px 20px;background-position: center left;}
	.pl-dt-pl{position:absolute;bottom: 0px;right:10px;font-size: 14px;color:#333;}
	.commentAll{display:none;}
</style>
</head>

<body>
	<header class="header">
		<div class="header_left">
			<img src="images/guanbi.png" alt="">
		</div>
		<div class="header_zi">
			心连心爱心筹
		</div>
		<div class="header_right">
			<img src="images/gengduo.png" alt="">
		</div>
	</header>
	<div class="header_gaodu"></div>
	<div class="btzs_aixinbaozhu1">
		<div class="btzs_aixinbaozhu2">
			<div class="aixinbaozhu3">
				<img src="images/tx-5.png" alt="">
			</div>
			<div class="pl-dt-text">
				<h4>帅气的</h4>
				<p>这是我的一大段评论这是我的一大段评论这是我的一大段评论这是我的一大段评论</p>
			</div>
			<div class="clearfix"></div>
			<div class="pl-dt-img">
				<img src="images/touxiang.jpg" alt="">
				<img src="images/touxiang.jpg" alt="">
				<img src="images/touxiang.jpg" alt="">
				<img src="images/touxiang.jpg" alt="">
				<img src="images/touxiang.jpg" alt="">
				<img src="images/touxiang.jpg" alt="">
				<div class="pl-dt-zan">
					22
				</div>
				<div class="pl-dt-pl">
					评论
				</div>
				<p>2017-5-2 11:11:39</p>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="commentAll">
			<div class="reviewArea clearfix">
		        <textarea class="content comment-input" placeholder="Please enter a comment&hellip;" onkeyup="keyUP(this)"></textarea>
		        <a href="javascript:;" class="plBtn">评论</a>
		    </div>
		    <!--回复区域 begin-->
		    <div class="comment-show">
		        <div class="comment-show-con clearfix">
		            <div class="comment-show-con-img pull-left"><img src="images/tx-5.png" alt=""></div>
		            <div class="comment-show-con-list pull-left">
		                <div class="pl-text clearfix">
		                    <a href="#" class="comment-size-name">张三 : </a>
		                    <span class="my-pl-con">&nbsp;来啊 造作啊!</span>
		                </div>
		                <div class="date-dz">
		                    <span class="date-dz-left pull-left comment-time">2017-5-2 11:11:39</span>
		                    <div class="date-dz-right pull-right comment-pl-block">
		                        <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>
		                        <span class="pull-left date-dz-line">|</span>
		                        <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">666</i>)</a>
		                    </div>
		                </div>
		                <div class="hf-list-con"></div>
		            </div>
		        </div>
		    </div>
		    <!--回复区域 end-->
		</div>
	</div>
	<div class="btzs_aixinbaozhu1">
		<div class="btzs_aixinbaozhu2">
			<div class="aixinbaozhu3">
				<img src="images/tx-5.png" alt="">
			</div>
			<div class="pl-dt-text">
				<h4>帅气的</h4>
				<p>这是我的一大段评论这是我的一大段评论这是我的一大段评论这是我的一大段评论</p>
			</div>
			<div class="clearfix"></div>
			<div class="pl-dt-img">
				<img src="images/touxiang.jpg" alt="">
				<img src="images/touxiang.jpg" alt="">
				<img src="images/touxiang.jpg" alt="">
				<img src="images/touxiang.jpg" alt="">
				<img src="images/touxiang.jpg" alt="">
				<img src="images/touxiang.jpg" alt="">
				<div class="pl-dt-zan">
					22
				</div>
				<div class="pl-dt-pl">
					评论
				</div>
				<p>2017-5-2 11:11:39</p>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="commentAll">
			<div class="reviewArea clearfix">
		        <textarea class="content comment-input" placeholder="Please enter a comment&hellip;" onkeyup="keyUP(this)"></textarea>
		        <a href="javascript:;" class="plBtn">评论</a>
		    </div>
		    <!--回复区域 begin-->
		    <div class="comment-show">
		        <div class="comment-show-con clearfix">
		            <div class="comment-show-con-img pull-left"><img src="images/tx-5.png" alt=""></div>
		            <div class="comment-show-con-list pull-left">
		                <div class="pl-text clearfix">
		                    <a href="#" class="comment-size-name">张三 : </a>
		                    <span class="my-pl-con">&nbsp;来啊 造作啊!</span>
		                </div>
		                <div class="date-dz">
		                    <span class="date-dz-left pull-left comment-time">2017-5-2 11:11:39</span>
		                    <div class="date-dz-right pull-right comment-pl-block">
		                        <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>
		                        <span class="pull-left date-dz-line">|</span>
		                        <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">666</i>)</a>
		                    </div>
		                </div>
		                <div class="hf-list-con">

		                </div>
		            </div>
		        </div>
		    </div>
		    <!--回复区域 end-->
		</div>
	</div>
	<div class="header_gaodu"></div>
	<div class="footer">
		<a href="index.html">
			<div class="footer1">
				<div class="footer2">
					<img src="images/aixinchou-1.png" alt="">
				</div>
				<div class="footer3">
					爱心筹
				</div>
			</div>
		</a>
		<a href="dtpl.html">
			<div class="footer1">
				<div class="footer2">
					<img src="images/dt1.png" alt="">
				</div>
				<div class="footer3_1">
					众筹动态
				</div>
			</div>
		</a>
		<a href="fqzc.html">
			<div class="footer1">
				<div class="footer2">
					<img src="images/fq-2.png" alt="">
				</div>
				<div class="footer3">
					发起众筹
				</div>
			</div>
		</a>
		<a href="grzx.html">
			<div class="footer1">
				<div class="footer2">
					<img src="images/grzx-2.png" alt="">
				</div>
				<div class="footer3">
					个人中心
				</div>
			</div>
		</a>
		<div class="clearfix"></div>
	</div>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/jquery.flexText.js"></script>
<script type="text/javascript">
	$('.pl-dt-pl').click(function(){
		var off=1;
		var obj=$(this).parents('.btzs_aixinbaozhu2').siblings('.commentAll')
		if(obj.is(":hidden")){
			obj.slideDown("slow");
		}else{
			obj.slideUp("slow");
		}
	})
</script>
<!--textarea高度自适应-->
<script type="text/javascript">
    $(function () {
        $('.content').flexText();
    });
</script>
<!--textarea限制字数-->
<script type="text/javascript">
    function keyUP(t){
        var len = $(t).val().length;
        if(len > 139){
            $(t).val($(t).val().substring(0,140));
        }
    }
</script>
<!--点击评论创建评论条-->
<script type="text/javascript">
    $('.commentAll').on('click','.plBtn',function(){
        var myDate = new Date();
        //获取当前年
        var year=myDate.getFullYear();
        //获取当前月
        var month=myDate.getMonth()+1;
        //获取当前日
        var date=myDate.getDate();
        var h=myDate.getHours();       //获取当前小时数(0-23)
        var m=myDate.getMinutes();     //获取当前分钟数(0-59)
        if(m<10) m = '0' + m;
        var s=myDate.getSeconds();
        if(s<10) s = '0' + s;
        var now=year+'-'+month+"-"+date+" "+h+':'+m+":"+s;
        //获取输入内容
        var oSize = $(this).siblings('.flex-text-wrap').find('.comment-input').val();
        console.log(oSize);
        //动态创建评论模块
        oHtml = '<div class="comment-show-con clearfix"><div class="comment-show-con-img pull-left"><img src="images/tx-5.png" alt=""></div> <div class="comment-show-con-list pull-left"><div class="pl-text clearfix"> <a href="#" class="comment-size-name">David Beckham : </a> <span class="my-pl-con">&nbsp;'+ oSize +'</span> </div> <div class="date-dz"> <span class="date-dz-left pull-left comment-time">'+now+'</span> <div class="date-dz-right pull-right comment-pl-block"><a href="javascript:;" class="removeBlock">删除</a> <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> <span class="pull-left date-dz-line">|</span> <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">666</i>)</a> </div> </div><div class="hf-list-con"></div></div> </div>';
        if(oSize.replace(/(^\s*)|(\s*$)/g, "") != ''){
            $(this).parents('.reviewArea ').siblings('.comment-show').prepend(oHtml);
            $(this).siblings('.flex-text-wrap').find('.comment-input').prop('value','').siblings('pre').find('span').text('');
        }
    });
</script>
<!--点击回复动态创建回复块-->
<script type="text/javascript">
    $('.comment-show').on('click','.pl-hf',function(){
        //获取回复人的名字
        var fhName = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html();
        //回复@
        var fhN = '回复@'+fhName;
        //var oInput = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.hf-con');
        var fhHtml = '<div class="hf-con pull-left"> <textarea class="content comment-input hf-input" placeholder="" onkeyup="keyUP(this)"></textarea> <a href="javascript:;" class="hf-pl">评论</a></div>';
        //显示回复
        if($(this).is('.hf-con-block')){
            $(this).parents('.date-dz-right').parents('.date-dz').append(fhHtml);
            $(this).removeClass('hf-con-block');
            $('.content').flexText();
            $(this).parents('.date-dz-right').siblings('.hf-con').find('.pre').css('padding','6px 15px');
            //console.log($(this).parents('.date-dz-right').siblings('.hf-con').find('.pre'))
            //input框自动聚焦
            $(this).parents('.date-dz-right').siblings('.hf-con').find('.hf-input').val('').focus().val(fhN);
        }else {
            $(this).addClass('hf-con-block');
            $(this).parents('.date-dz-right').siblings('.hf-con').remove();
        }
    });
</script>
<!--评论回复块创建-->
<script type="text/javascript">
    $('.comment-show').on('click','.hf-pl',function(){
        var oThis = $(this);
        var myDate = new Date();
        //获取当前年
        var year=myDate.getFullYear();
        //获取当前月
        var month=myDate.getMonth()+1;
        //获取当前日
        var date=myDate.getDate();
        var h=myDate.getHours();       //获取当前小时数(0-23)
        var m=myDate.getMinutes();     //获取当前分钟数(0-59)
        if(m<10) m = '0' + m;
        var s=myDate.getSeconds();
        if(s<10) s = '0' + s;
        var now=year+'-'+month+"-"+date+" "+h+':'+m+":"+s;
        //获取输入内容
        var oHfVal = $(this).siblings('.flex-text-wrap').find('.hf-input').val();
        console.log(oHfVal)
        var oHfName = $(this).parents('.hf-con').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html();
        var oAllVal = '回复@'+oHfName;
        if(oHfVal.replace(/^ +| +$/g,'') == '' || oHfVal == oAllVal){
        	alert(oHfVal);
        	var oHtml = '<div class="all-pl-con"><div class="pl-text hfpl-text clearfix"><a href="#" class="comment-size-name">我的名字 : </a><span class="my-pl-con">'+0+'</span></div><div class="date-dz"> <span class="date-dz-left pull-left comment-time">'+oHfVal+'</span> <div class="date-dz-right pull-right comment-pl-block"> <a href="javascript:;" class="removeBlock">删除</a> <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> <span class="pull-left date-dz-line">|</span> <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">666</i>)</a> </div> </div></div>';
                oThis.parents('.hf-con').parents('.comment-show-con-list').find('.hf-list-con').css('display','block').prepend(oHtml) && oThis.parents('.hf-con').siblings('.date-dz-right').find('.pl-hf').addClass('hf-con-block') && oThis.parents('.hf-con').remove();
         }else {
            
             var oHtml = '<div class="all-pl-con"><div class="pl-text hfpl-text clearfix"><a href="#" class="comment-size-name">我的名字 : </a><span class="my-pl-con">'+0+'</span></div><div class="date-dz"> <span class="date-dz-left pull-left comment-time">'+oHfVal+'</span> <div class="date-dz-right pull-right comment-pl-block"> <a href="javascript:;" class="removeBlock">删除</a> <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> <span class="pull-left date-dz-line">|</span> <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">666</i>)</a> </div> </div></div>';
                oThis.parents('.hf-con').parents('.comment-show-con-list').find('.hf-list-con').css('display','block').prepend(oHtml) && oThis.parents('.hf-con').siblings('.date-dz-right').find('.pl-hf').addClass('hf-con-block') && oThis.parents('.hf-con').remove();   
            
        }
    });
</script>
<!--删除评论块-->
<script type="text/javascript">
    // $('.commentAll').on('click','.removeBlock',function(){
    //     var oT = $(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con');
    //     if(oT.siblings('.all-pl-con').length >= 1){
    //         oT.remove();
    //     }else {
    //         $(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con').parents('.hf-list-con').css('display','none')
    //         oT.remove();
    //     }
    //     $(this).parents('.date-dz-right').parents('.date-dz').parents('.comment-show-con-list').parents('.comment-show-con').remove();

    // })
</script>
<!--点赞-->
<script type="text/javascript">
    $('.comment-show').on('click','.date-dz-z',function(){
        var zNum = $(this).find('.z-num').html();
        if($(this).is('.date-dz-z-click')){
            zNum--;
            $(this).removeClass('date-dz-z-click red');
            $(this).find('.z-num').html(zNum);
            $(this).find('.date-dz-z-click-red').removeClass('red');
        }else {
            zNum++;
            $(this).addClass('date-dz-z-click');
            $(this).find('.z-num').html(zNum);
            $(this).find('.date-dz-z-click-red').addClass('red');
        }
    })
</script>